<template>
  <div class="login-container login-two-col">
    <div class="login-left">
      <div class="login-brand">福田资产管理</div>
      <div class="login-left-content">
        <h2 class="login-slogan">智能资产管理平台</h2>
        <p class="login-sub">全生命周期管理资产，提升效率与可视化</p>
        <img class="login-banner-img" :src="bannerImg" alt="login banner" />
      </div>
    </div>

    <div class="login-right">
      <div class="login-right-inner">
        <h3 class="login-title">登录 福田资产管理</h3>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="admin"
              prefix-icon="User"
              size="large"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              size="large"
              :show-password="true"
              @keyup.enter="handleLogin"
            />
          </el-form-item>

          <div class="login-extra">
            <el-checkbox v-model="remember">记住密码</el-checkbox>
            <a class="forgot-link" href="javascript:void(0)">忘记密码</a>
          </div>

          <el-form-item>
            <el-button type="primary" size="large" :loading="loading" @click="handleLogin" style="width: 100%">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
import bannerImg from '@/assets/image/banner/login-banner.png'

const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref(null)
const loading = ref(false)
const remember = ref(true)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      
      // 模拟登录请求
      setTimeout(() => {
        const token = 'mock-token-' + Date.now()
        const userInfo = {
          username: loginForm.username,
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        }
        
        userStore.setToken(token)
        userStore.setUserInfo(userInfo)
        
        ElMessage.success('登录成功')
        loading.value = false
        router.push('/')
      }, 1000)
    }
  })
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
}

/* 左右结构 */
.login-two-col .login-left {
  flex: 1;
  padding: 48px 56px;
  color: #fff;
  background: linear-gradient(180deg, #0e2b55 0%, #0b1f3f 100%);
  position: relative;
}

.login-brand {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
}

.login-left-content {
  position: absolute;
  left: 56px;
  right: 56px;
  top: 50%;
  transform: translateY(-45%);
  text-align: left;
}

.login-slogan {
  font-size: 24px;
  margin: 0 0 12px;
}

.login-sub {
  opacity: 0.85;
  margin-bottom: 24px;
}

.login-banner-img {
  max-width: 540px;
  width: 100%;
}

/* 右侧登录表单 */
.login-two-col .login-right {
  flex: 3; /* 右侧更宽，整体比例 1:3 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-right-inner {
  width: 360px;
}
</style>
